<template>
  <CustomTabs class="h-100P bg-white">
    <el-tabs v-model="activeName" type="border-card" class="h-100P flex-column">
      <el-tab-pane class="h-100P" label="基本信息" name="brief" lazy>
        <Brief
          ref="brief"
          :value="group"
          @change="handleChange"
          @manage-device="handleManageDevice"
        />
      </el-tab-pane>
      <el-tab-pane class="h-100P" label="设备列表" name="deviceList" lazy>
        <DeviceList @change="handleDeviceListChange"/>
      </el-tab-pane>
    </el-tabs>
  </CustomTabs>
</template>

<script>
import CustomTabs from '@/components/custom-tabs'
import Brief from './components/brief'
import DeviceList from './components/device-list'

export default {
  name: 'GroupDetail',
  components: { CustomTabs, Brief, DeviceList },
  data() {
    return {
      activeName: 'brief',
      group: {}
    }
  },
  methods: {
    handleChange() {
    },
    handleManageDevice() {
      this.activeName = 'deviceList'
    },
    handleDeviceListChange() {
      this.$refs.brief.reflash()
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep {
  .el-tabs__content {
    flex: 1;
  }
}
</style>
